<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="time">
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        :
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
        :
        <img src="./img/0.png" alt="">
        <img src="./img/0.png" alt="">
    </div>
</body>
<script>

    var aImg = document.querySelectorAll(".time img");

    // 初始立即执行一次，否则会有一瞬间的空白
    imgTime();

    // 开启计时器，每隔1秒钟，重新执行时钟功能
    setInterval(function(){
        imgTime()
    }, 1000);

    function imgTime(){
        // 获取当前计算机时间
        var d = new Date();

        // 解析出时分秒的每个数字
        var h = cz(d.getHours());
        var m = cz(d.getMinutes());
        var s = cz(d.getSeconds());

        // 替换img标签的src属性，实现图片的切换
        aImg[0].src = "./img/"+ h[0] +".png";
        aImg[1].src = "./img/"+ h[1] +".png";
        aImg[2].src = "./img/"+ m[0] +".png";
        aImg[3].src = "./img/"+ m[1] +".png";
        aImg[4].src = "./img/"+ s[0] +".png";
        aImg[5].src = "./img/"+ s[1] +".png";
    }

    function cz(n){
        return n<10 || n.length < 2 ? "0"+n : ""+n;
    }
</script>
</html>